<template>
    <div class="wrap-sider">
        <div class="wrap-menu">
            <v3scroll breadth="2" :resize-object="true">
                <a-menu v-model:selected-keys="menu.selectedKeys" class="menu" :open-keys="menu.openKeys" mode="inline" @select="onSelect" @open-change="onOpenChange">
                    <menu-item v-for="item in treeList" :key="item.id" :item="item" />
                </a-menu>
            </v3scroll>
        </div>
    </div>
</template>
<script setup>
import { reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import TreeUtils from '@iframe/tools/utils/TreeUtils'
import MenuUtils from '/@/utils/MenuUtils'
import MenuItem from './MenuItem'
import { usePermissionStore } from '@iframe/tools/store/modules/permission'
import clone from 'clone'

const permissionStore = usePermissionStore()
const { getMenu } = storeToRefs(permissionStore)
const router = useRouter()
const route = useRoute()

const menu = reactive({
    selectedKeys: [],
    openKeys: []
})

const treeList = computed(() => {
    const menuList = clone(getMenu.value.filter(item => item.isHidden === 1))
    return TreeUtils.generateTreeData(menuList)
})

const onSelect = select => {
    menu.selectedKeys = [select.key]
    router.push(select.key)
}

const onOpenChange = openKeys => {
    if (menu.openKeys.length < openKeys.length) {
        menu.openKeys = TreeUtils.getRootPath(treeList.value, openKeys[openKeys.length - 1])
    }
}
onMounted(() => {
    initMenuData()
})

const initMenuData = () => {
    const url = route.path
    if (treeList.value && treeList.value.length > 0) {
        menu.openKeys = MenuUtils.getUrlPath(treeList.value, url) || []
        const item = MenuUtils.getTreeNode(treeList.value, url)
        menu.selectedKeys = item ? [item.url] : []
    }
}
watch(
    () => route.path,
    () => {
        initMenuData()
    }
)
</script>
<style lang="less" scoped>
.wrap-sider {
    display: flex;
    flex-direction: column;
    height: 100%;
    .logo {
        height: 60px;
        background-color: #1890ff;
        padding: 14px 5px;
        box-sizing: border-box;
        cursor: pointer;
        img {
            width: 32px;
            height: 32px;
            vertical-align: middle;
            margin-right: 5px;
        }

        h1 {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
            line-height: 32px;
        }
    }

    .collapsed {
        text-align: center;
    }

    .uncollapsed {
        img {
            float: left;
        }
    }
    .wrap-menu {
        flex: 1;
        overflow-y: auto;
        .menu {
            :deep(li.ant-menu-item:first-child) {
                margin-top: 0;
            }
        }
    }
    .wrap-menu::-webkit-scrollbar {
        width: 0;
    }
    :deep(.ant-menu-title-content) {
        font-weight: bold;
        color: #1a1a1a;
    }
    :deep(.ant-menu-item-selected) .ant-menu-title-content {
        color: #4764e6;
    }
    :deep(.ant-menu-item-selected) svg path {
        fill: #4764e6;
    }
}
</style>
